import { passLogin, logout, AdminMenuList } from "@/api/user.js";
import { setToken, getToken, setUserInfo, getUserInfo } from "@/utils/util.js";
import config from "@/config";
import { ElMessage } from "element-plus";
import { mix } from "../../utils/color.js";
export default {
  namespaced: true,
  state: {
    token: getToken(), // 当前用户token
    originUserInfo: getUserInfo(), // 当前用户信息
    isCollapse: false, //侧边栏是否收起
    themeConfig: {
      primary: "#3363ff", //主题 按钮的背景色
      tabColor: "#3c4772", //导航栏背景颜色
      footColor: "#606266", //导航栏字体颜色
      backgroundColor: "#ffffff", //左侧导航背景颜色(侧边栏)
      textColor: "#00000099", //左侧导航字体颜色
      istags: false, //是否显示标签栏
    },
    menuAllList: [], //左侧菜单
    isLoginLoading: false, //登录加载
  },
  mutations: {
    // 在vuex存放token，而且调用工具函数存放在本地
    setToken(state, token) {
      state.token = token;
      setToken(token);
    },
    // 在vuex存放当前登录的用户信息，而且调用工具函数存放在本地
    setUserData(state, info) {
      state.originUserInfo = info;
      setUserInfo(info);
    },

    SetIsCollapse(state, isCollapse) {
      state.isCollapse = isCollapse;
    },
    setThemeConfig(state, primary) {
      state.themeConfig.primary = primary;
    },
    setThemeConfigTbaColor(state, primary) {
      state.themeConfig.tabColor = primary;
      if (primary == "#FFFFFF") {
        state.themeConfig.footColor = "#606266";
      } else {
        state.themeConfig.footColor = "#ffffff";
      }
    },
    setThemeConfigMenuColor(state, primary) {
      if (primary) {
        state.themeConfig.backgroundColor = "#FFFFFF";
        state.themeConfig.textColor = "#00000099";
      } else {
        state.themeConfig.backgroundColor = "#1d2129";
        state.themeConfig.textColor = "#bdbdc0";
      }
    },
    setThemeConfigchangeTags(state, primary) {
      if (primary) {
        state.themeConfig.istags = true;
      } else {
        state.themeConfig.istags = false;
      }
    },
    setIsLoginLoading(state, type) {
      state.isLoginLoading = type;
    },
    setMenuAllList(state, list) {
      state.menuAllList = list;
    },
  },

  actions: {
    // 密码登录
    passWordLogin({ commit, dispatch }, param) {
      commit("setIsLoginLoading", true);
      passLogin(param)
        .then((res) => {
          console.log("登录成功", res);
          // 登录成功设置token
          commit("setToken", res.userToken);
          // 存储 用户信息
          commit("setUserData", res.userInfo);
          // 如果是后端返回左侧菜单，就调用接口获取
          if (config.menuControl === "back-end") {
            dispatch("getMenuList", { type: "login" });
          } else {
            commit("setIsLoginLoading", false);
            // 如果不是就正常登录进去
            ElMessage.success(`欢迎登录！${config.title}`);
          }
        })
        .catch((err) => {
          // 失败了就关掉锁定
          commit("setIsLoginLoading", false);
        });
    },

    // 退出登录
    handleLogOut({ state, commit }) {
      return new Promise((resolve, reject) => {
        logout(state.token)
          .then(() => {
            commit("setToken", "");
            commit("setUserData", {});
            commit("setMenuAllList", []);
            resolve();
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    clearInfo({ state, commit }) {
      return new Promise((resolve, reject) => {
        commit("setToken", "");
        commit("setUserData", {});
        commit("setMenuAllList", []);
        resolve();
      });
    },
    // 获取左侧菜单
    getMenuList({ commit, dispatch }, param) {
      AdminMenuList({
        pageNum: 1,
        pageSize: 2000,
      })
        .then((res) => {
          console.log("获取左侧菜单", res.list);
          let list = res.list || [];
          // 排序
          list.sort((a, b) => {
            return Number(a.sn || 999999) - Number(b.sn || 999999); //没填的就放在最后
          });
          commit("setMenuAllList", list);
        })
        .finally(() => {
          // 如果是从登录进来的才需要
          if (param && param.type && param.type === "login") {
            setTimeout(() => {
              commit("setIsLoginLoading", false);
              ElMessage.success(`欢迎登录！${config.title}`);
            }, 500);
          }
        });
    },
    changeIsCollapse({ commit }, str) {
      console.log(str);
      commit("SetIsCollapse", str);
    },
    changeThem({ commit }, str) {
      const pre = "--el-color-primary";
      // 白色混合色
      const mixWhite = "#ffffff";
      // 黑色混合色
      const mixBlack = "#4060c7";
      const el = document.documentElement;
      el.style.setProperty(pre, str);
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.7));
      }
      el.style.setProperty("--el-color-primary-dark", mix(str, mixBlack, 0.1));
      commit("setThemeConfig", str);
    },
    changeTabColor({ commit }, val) {
      commit("setThemeConfigTbaColor", val);
    },
    changeMenuColor({ commit }, val) {
      commit("setThemeConfigMenuColor", val);
    },
    changeTags({ commit }, val) {
      commit("setThemeConfigchangeTags", val);
    },
  },
};
